<template>
    <div class="madp-manager-view">
        <div class="madp-view-container">
            <template v-if="!isLoading">
                <todo-component v-if="activeTab == 1"></todo-component>
                <customer-component v-else-if="activeTab == 2"></customer-component>
                <shop-component v-else-if="activeTab == 3" :wxUserId="wxUserId" :wxExternalUserid="wxExternalUserid" :isSharePage="isSharePage"></shop-component>
                <my-component v-else-if="activeTab == 4"></my-component>
            </template>
        </div>
        <div class="tab-btns">
            <div :class="['item', activeTab == 1 ? 'active' : '']" @click="handleTab(1)">
                <img v-if="activeTab == 1" src="@/assets/img/managerView/tab_1.png" alt="" srcset="" />
                <img v-else src="@/assets/img/managerView/tab_1_gray.png" alt="" srcset="" />
                <span>待办</span>
            </div>
            <div :class="['item', activeTab == 2 ? 'active' : '']" @click="handleTab(2)">
                <img v-if="activeTab == 2" src="@/assets/img/managerView/tab_2.png" alt="" srcset="" />
                <img v-else src="@/assets/img/managerView/tab_2_gray.png" alt="" srcset="" />
                <span>客户</span>
            </div>
            <div :class="['item', activeTab == 3 ? 'active' : '']" @click="handleTab(3)">
                <img v-if="activeTab == 3" src="@/assets/img/managerView/tab_3.png" alt="" srcset="" />
                <img v-else src="@/assets/img/managerView/tab_3_gray.png" alt="" srcset="" />
                <span>小店</span>
            </div>
            <div :class="['item', activeTab == 4 ? 'active' : '']" @click="handleTab(4)">
                <img v-if="activeTab == 4" src="@/assets/img/managerView/tab_4.png" alt="" srcset="" />
                <img v-else src="@/assets/img/managerView/tab_4_gray.png" alt="" srcset="" />
                <span>我的</span>
            </div>
        </div>
    </div>
</template>
<script>
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    import todoComponent from '@/components/manager-view/todo.vue';
    import shopComponent from '@/components/manager-view/shop.vue';
    import customerComponent from '@/components/manager-view/customer.vue';
    import myComponent from '@/components/manager-view/my.vue';
    import financialApi from '@/api/financial-shop.js';
    export default {
        mixins: [mxInitWxConfig],
        components: { todoComponent, shopComponent, customerComponent, myComponent },
        data() {
            return {
                isLoading: true,
                activeTab: 1
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    this.isLoading = false;
                    this.getManageInfo();
                }
            }
        },
        created() {},
        mounted() {},
        activated() {
            if (this.wxUserId) {
                this.isLoading = false;
                this.getManageInfo();
            }
        },
        deactivated() {
            this.isLoading = true;
        },
        methods: {
            handleTab(idx) {
                this.activeTab = idx;
            },
            // 获取经理信息 初始化分享信息
            getManageInfo() {
                financialApi
                    .getManageInfo({
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        this.manageInfo = res.data.data;
                        this.manageInfo.mgrAvatar = this.manageInfo.mgrAvatar || '/mfs/avatar.jpg';
                        let urls = this.$utils.getShareUrl('financialShop', { radar_type_code: '00', radar_code: 'wes', radar_name: '金融小店' });
                        this.$wxShare.setShareInfo(
                            {
                                title: `${this.manageInfo.userName || '客户经理'}的金融小店`, // 分享标题
                                desc: this.manageInfo.intro || '这是我的金融小店！快来加入吧', // 分享描述
                                link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: `${this.$utils.apiUrl}${this.manageInfo.mgrAvatar}`
                            },
                            () => {
                                // alert('分享成功')
                            }
                        );
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-manager-view {
        position: relative;
        height: 100vh;
        overflow-y: hidden;
        .madp-view-container {
            height: calc(100vh - 1.5rem);
            overflow-y: scroll;
            background: #fafafa;
            box-sizing: border-box;
        }
        .tab-btns {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1.5rem;
            display: flex;
            justify-content: space-around;
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
            padding-bottom: 20px;
            // backdrop-filter: blur(20px);
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: rgba(44, 44, 44, 0.5);
                padding: 9px 20px;
                img {
                    width: 20px;
                    height: 20px;
                }
                span {
                    margin-top: 7px;
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }
            }
            .active {
                color: #ed5550;
            }
        }
    }
</style>
